export const theme = {
    neumorphism: {
        "font-color": "#2c3e50",
        "font-active-color": "#a7b4cc",

        "border-radius": "5px",

        "background-color": "#f0f0f3",
        "background-button-color": "#f5f1f1",
        "background-active-color": "#eeeeee",
        "background-info-color": "rgba(229, 212, 212, 0.2)",
        "background-setting-color": "#c3c1c1",

        "box-shadow": "-1px -1px 3px #ffffff, 2px 2px 3px rgba(174, 174, 192, 0.4)",
        "box-active-shadow": "inset -1px -1px 1px #fafafb, inset 1px 1px 2px #e3e3e8",
        "un-box-shadow": "inset -1px -1px 1px rgb(255 255 255 / 70%), inset 1px 1px 2px rgb(174 174 192 / 20%)",
        "un-box-active-shadow": "inset -1px -1px 1px rgb(255 255 255 / 70%), inset 1px 1px 2px rgb(0 0 192 / 20%)"
    },
    neumorphismU: {
        "font-color": "#2c3e50",
        "font-active-color": "#a7b4cc",

        "border-radius": "3px",

        "background-color": "#ffffff",
        "background-button-color": "#f5f1f1",
        "background-active-color": "#eeeeee",
        "background-info-color": "rgba(229, 212, 212, 0.2)",
        "background-setting-color": "#c3c1c1",

        "box-shadow": "-1px -1px 3px #c7c7c7,2px 2px 3px #ffffff",
        "box-active-shadow": "inset -1px -1px 1px #fafafb, inset 1px 1px 2px #e3e3e8",
        "un-box-shadow": "inset -1px -1px 1px rgb(255 255 255 / 70%), inset 1px 1px 2px rgb(174 174 192 / 20%)",
        "un-box-active-shadow": "inset -1px -1px 1px rgb(255 255 255 / 70%), inset 1px 1px 2px rgb(0 0 192 / 20%)"
    },
    uglyBlue: {
        "font-color": "#94126a",
        "font-active-color": "#a7b4cc",

        "border-radius": "3px",

        "background-color": "#1515dd",
        "background-button-color": "#152f7c",
        "background-active-color": "#105ed6",
        "background-info-color": "rgb(195,18,67)",
        "background-setting-color": "#c3c1c1",

        "box-shadow": "-1px -1px 3px #1515dd,2px 2px 3px #1515dd",
        "box-active-shadow": "inset -1px -1px 1px #fafafb, inset 1px 1px 2px #e3e3e8",
        "un-box-shadow": "inset -1px -1px 1px #1515dd, inset 1px 1px 2px rgb(113 113 192 / 20%)",
        "un-box-active-shadow": "inset -1px -1px 1px #1515dd, inset 1px 1px 2px rgb(233 233 192 / 20%)"

    }
}

// let color = '#7171c1'

export const changeTheme = function (theme) {

    Object.keys(theme).forEach(value => {
        document.body.style.setProperty("--" + value, theme[value]);
    })
}

export const changeThemeByName = function (themeName) {

    let t = theme[themeName];
    Object.keys(t).forEach(value => {
        document.body.style.setProperty("--" + value, t[value]);
    })
}
